<template>
  <div class="wrap">
    <div style="margin-bottom:10px;">
      <el-date-picker
        :editable="false"
        :picker-options="pickerOptions"
        value-format="yyyy-MM-dd"
        v-model="dateValue"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="dateChange">
      </el-date-picker>
      <el-switch
        v-model="newUserSwitch"
        active-text="仅看新用户"
        @change="newUserSwitchChange">
      </el-switch>
      <!-- <el-switch
        style="margin-left:30px;"
        v-model="androidSwitch"
        active-text="仅看安卓"
        @change="newUserSwitchChange">
      </el-switch> -->
      <el-button icon="el-icon-refresh" @click="refreshClick" style="margin-left:20px;">刷新</el-button>
    </div>
    <el-table
      class="table"
      border fit highlight-current-row
      v-loading="loading"
      element-loading-text="加载中"
      element-loading-spinner="el-icon-loading"
      :data="tableData"
      style="width: 100%">
      <el-table-column
          align="center"
          type="index"
          width="50">
      </el-table-column>
      <el-table-column
          align="center"
          prop="position"
          label="位置">
      </el-table-column>
      <el-table-column
          align="center"
          prop="appActivationNum"
          label="激活用户">
      </el-table-column>
      <el-table-column
          align="center"
          label="产品用户数|比率">
          <template slot-scope="scope">
            <p>{{scope.row.productUserNum || 0}} | {{isNaN((scope.row.productUserNum*100/scope.row.appActivationNum).toFixed(1)) ? '-' : ((scope.row.productUserNum*100/scope.row.appActivationNum).toFixed(1))+'%'}}</p>
          </template>
      </el-table-column>
      <el-table-column
          align="center"
          prop="productUvNum"
          label="产品UV数">
      </el-table-column>
    </el-table>
    <div class="clearfix pagination" style="margin-top:30px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.pageNum"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import _statistics from '@/services/statistics.js'
export default {
  data() {
    return {
      totalNum: 0,
      query: {
        pageNum: 1,
        pageSize: 30
      },
      newUserSwitch: false,
      androidSwitch: false,
      dateValue: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      loading: false,
      tableData: [{
        position: '跑马灯',
        activeUserNum: 2000,
        productUvNum: 5000,
        productUserNum: 1300,
        productUserRate: 67
      }]
    }
  },
  methods: {
    // 仅看新用户开关
    newUserSwitchChange(val){
      console.log('val', this.newUserSwitch)
      // console.log('val', this.androidSwitch)
      this.getList()
    },
    handleSizeChange(val) {
      this.query.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.query.pageNum = val
      this.getList()
    },
    // 日期改变
    dateChange(val){
      console.log('dateValue', this.dateValue)
      this.getList()
    },
    getList(){
      let params = {
        isNewUser: this.newUserSwitch ? 1 : 0,
        pageSize: this.query.pageSize,
        pageNum: this.query.pageNum,
        startTime: !this.dateValue ? "" : this.dateValue[0],
        endTime: !this.dateValue ? "" : this.dateValue[1]
      }
      _statistics.postionTransfer(params)
      .then(res => {
        console.log('res', res.data)
        this.tableData = res.data.list
        this.totalNum = res.data.total
      })
    },
    // 刷新按钮
    refreshClick(){
      this.getList()
    }
  },
  created(){
    this.dateValue = [this._mapping.date_format2(new Date()), this._mapping.date_format2(new Date())]
    this.getList()
  }
}
</script>
<style lang="scss" scoped>
</style>